<template>
  <a-style-provider hash-priority="high">
    <a-layout>
      <a-layout-header class="w-full z-100 fixed flex z-[999]">
        <div class="flex-1">
          <a-space>
            <a-button type="link" @click="back">
              <template #icon>
                <Icon icon="LeftOutlined"></Icon>
              </template>
              返回
            </a-button>
            <a-space size="small">
              <h1 class="text-[18px]">{{questionData.title}}</h1>
            </a-space>
          </a-space>
        </div>
        <div class="flex-1 text-center">
          <a-space>
            <a-input v-model:value="copyData" placeholder="Basic usage" style="width: 300px"/>
            <a-button @click="copyValue">
              <template #icon>
                <Icon icon="CopyOutlined"></Icon>
              </template>
            </a-button>
            <a-button>
              <template #icon>
                <Icon icon="QrcodeOutlined"></Icon>
              </template>
            </a-button>
          </a-space>
        </div>
        <div class="flex-1 justify-end flex" >
          <a-space>
            <a-button type="primary" @click="to">
              编辑问卷
            </a-button>
          </a-space>
        </div>
      </a-layout-header>
      <a-layout-content :style="contentStyle" class="pt-[70px] h-[100vh] overflow-hidden">
        <div class="px-[24px] flex justify-between h-full">
          <div class="w-[300px] bg-[#fff] overflow-auto h-full pt-[5px] item-events-none">
            <EditCanvas></EditCanvas>
          </div>
          <div class="flex-1 mx-[25px] bg-[#fff] overflow-auto h-full">
            <div class="w-full py-[12px] px-[18px] h-full">
              <TableCanvas/>
            </div>
          </div>
          <div class="w-[340px] bg-[#fff] px-[12px] overflow-auto h-full">
            <div class="w-full py-[12px] ">
              <ChartCanvas></ChartCanvas>
            </div>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </a-style-provider>
</template>
<script setup>
import {Icon} from "../../utils/Icon.js";
import {computed, onMounted} from 'vue'
import TableCanvas from '../../components/TableCanvas/index.vue'
import EditCanvas from '../../components/EditCanvas/index.vue'
import ChartCanvas from '../../components/ChartCanvas/index.vue'
import { message } from 'ant-design-vue';
import {storeToRefs} from "pinia";
import useQuestion from "../../store/question.js";
const {questionData} = storeToRefs(useQuestion())
import clipboard3 from 'vue-clipboard3'
const { toClipboard } = clipboard3()
import {useRouter,useRoute} from "vue-router";
const $router = useRouter()
const $route = useRoute()
let copyData = computed({
  get() {
    return window.location.href.replace('stat/','edit/')
  },
  set() {

  }
})
const to = () => {
  $router.push({name:'edit',params:{id:$route.id}})
}
const back = () => {
  $router.back()
}
const copyValue = async () => {
  try {
    await toClipboard(copyData.value)
    message.success('拷贝成功');
  } catch (err) {
    message.error('拷贝失败');
  }
}
const contentStyle = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#f0f2f5',
};
</script>
<style scoped lang="scss">
:deep(.ant-layout-header ) {
  height: 56px !important;
  background: #fff !important;
  line-height: 56px !important;
  padding: 0 24px;
  padding-inline: 24px !important;
}

:deep(.ant-tabs-nav-wrap .anticon) {
  margin-right: 5px !important;
}

.item-events-none {
  :deep(.checkbox ) {
    pointer-events: none;
  }

  :deep(.radio ) {
    pointer-events: none;
  }
}
</style>
